<template>
  <div>
    <!-- 添加按钮 -->
    <el-button @click="dialogVisible = true" type="primary"> 添加 </el-button>
    <el-button
      type="danger"
      @click="dels()"
      :disabled="selectedRows.length === 0"
    >
      删除
    </el-button>
    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column prop="productId" type="selection" width="55" />
      <el-table-column prop="productId" label="商品编号" width="140" />
      <el-table-column prop="productName" label="商品名称" width="140" />
      <el-table-column prop="batchId" label="生产批次" width="140" />
      <el-table-column prop="keepSafe" label="保质期（天）" width="140" />
      <el-table-column prop="permission" label="生产许可证号" width="140" />
      <el-table-column prop="firmName" label="生产企业" width="140" />
      <el-table-column prop="creator" label="创建人" width="140" />
      <el-table-column prop="full" label="信息完整度" width="140" />
      <el-table-column v-slot="scoped" label="操作" width="340">
        <el-button
          type="danger"
          size="small"
          @click="del(scoped.row.productId)"
        >
          删除
        </el-button>
        <el-button
          type="success"
          size="small"
          @click="fan(scoped.row.productId)"
          >修改</el-button
        >
        <el-button type="primary" size="small" @click="Get(scoped.row.batchId)"
          >详情</el-button
        >
        <el-button type="primary" size="small">导出朔源码</el-button>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        v-model:current-page="form.PageIndex"
        v-model:page-size="form.PageSize"
        :page-sizes="[1, 2, 3, 15]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="form.TotalCount"
        @size-change="GetProduct()"
        @current-change="GetProduct()"
      />
    </div>
  </div>
  <div>
    <el-dialog
      v-model="dialogVisible"
      titlename="添加页面"
      width="500"
      :before-close="handleClose"
    >
      <span>
        <el-form-item label="商品名称" width="140">
          <el-select
            v-model="Produt.productClassId"
            placeholder="请选择商品名称"
          >
            <el-option
              v-for="items in Shopinfo"
              :label="items.productName"
              :value="items.productClassId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产批次" width="140">
          <el-input v-model="Produt.batchId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="保质期（天）" width="140">
          <el-input v-model="Produt.keepSafe" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生产许可证号" width="140">
          <el-input v-model="Produt.permission" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生产企业" width="140">
          <el-input v-model="Produt.firmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="封面图" width="140">
          <el-upload
            class="avatar-uploader"
            action="https://localhost:44372/api/rabbit/UploadImages"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="Produt.images" :src="Produt.images" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="AddProduct()"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisible1"
      title="修改页面"
      width="500"
      :before-close="handleClose"
    >
      <span>
        <el-form-item label="商品名称" width="140">
          <el-select
            v-model="Produt2.productClassId"
            placeholder="请选择商品名称"
          >
            <el-option
              v-for="items in Shopinfo"
              :label="items.productName"
              :value="items.productClassId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产批次" width="140">
          <el-input v-model="Produt2.batchId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="保质期（天）" width="140">
          <el-input v-model="Produt2.keepSafe" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生产许可证号" width="140">
          <el-input v-model="Produt2.permission" autocomplete="off" />
        </el-form-item>
        <el-form-item label="生产企业" width="140">
          <el-input v-model="Produt2.firmName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="封面图" width="140">
          <el-upload
            class="avatar-uploader"
            action="https://localhost:44372/api/rabbit/UploadImages"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
          >
            <img v-if="Produt2.images" :src="Produt2.images" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
          <el-button type="primary" @click="updateProduct()"> 修改 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElTable, ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();
//商品显示
const Shopinfo = <any>ref([]);
const ShopList = () => {
  KongaUrl
    .get("/user/api/rabbit/GetProductClass")
    .then((res) => {
      Shopinfo.value = res.data.data;
    });
};
//#region 添加方法和修改方法
const titlename = ref("");

//#endregion
//商品添加
const AddProduct = () => {
  KongaUrl
    .post("/userwriter/api/rabbit/AddProduct", Produt)
    .then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        ElMessage.success(res.data.message);
        dialogVisible.value = false;
        GetProduct();
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
//商品修改
const updateProduct = () => {
  KongaUrl
    .post("/userwriter/api/rabbit/UpdateProduct", {
      productId: Produt2.productId,
      batchId: Produt2.batchId,
      keepSafe: Produt2.keepSafe,
      permission: Produt2.permission,
      firmName: Produt2.firmName,
      full: Produt2.full,
      productClassId: Produt2.productClassId,
      images: Produt2.images,
      creator: Produt2.creator,
      creationDate: Produt2.creationDate,
      updateor: Produt2.updateor,
      updatedate: Produt2.updatedate,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 300) {
        ElMessage.success(res.data.message);
        dialogVisible1.value = false;
        GetProduct();
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
//删除
const del = (id: any) => {
  console.log(id);
  ElMessageBox.confirm("是否确认删除?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  }).then(() => {
    KongaUrl
      .post("/userwriter/api/rabbit/DelProduct", {
        ProductId: id,
      })
      .then((res) => {
        if (res.data.code == 500) {
          ElMessage.success(res.data.message);
          GetProduct();
        } else {
          ElMessage.error(res.data.message);
        }
      });
  });
};
//批量删除
// 存储选中的行数据
const selectedRows = ref([]);
// 表格引用
const tableRef = ref(null);
const handleSelectionChange = (val) => {
  selectedRows.value = val.map((item) => item.productId);
};

const dels = () => {
  if (selectedRows.value.length > 0) {
    ElMessageBox.confirm("是否确认批量删除?", "提示", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "warning",
    }).then(() => {
      KongaUrl
        .post("/userwriter/api/rabbit/DeletesProduct", {
          productsId: selectedRows.value,
        })
        .then((res) => {
          if (res.data.code == 500) {
            ElMessage.success(res.data.message);
            GetProduct();
          } else {
            ElMessage.error(res.data.message);
          }
        });
    });
  }
};
const Get = (batchId: any) => {
  router.push({
    path: "/GetProduct",
    query: {
      batchId: batchId,
    },
  });
};
//分页信息
const form = reactive({
  TotalCount: 0,
  PageCount: 0,
  PageSize: 15,
  PageIndex: 1,
});
//商品添加
const Produt = reactive({
  batchId: "",
  keepSafe: "",
  permission: "",
  firmName: "",
  full: 10,
  productClassId: 0,
  images: "",
  creator: "",
  creationDate: "2025-02-27T07:22:54.402Z",
  updateor: "",
  updatedate: "2025-02-27T07:22:54.402Z",
});
//修改表单
const Produt2 = reactive({
  productId: 0,
  batchId: "",
  keepSafe: "",
  permission: "",
  firmName: "",
  full: 10,
  productClassId: 0,
  images: "",
  creator: "",
  creationDate: "2025-02-27T07:22:54.402Z",
  updateor: "张三",
  updatedate: "2025-02-27T07:22:54.402Z",
});
//反填
const fan = (productId: any) => {
  dialogVisible1.value = true;
  KongaUrl
    .get("/user/api/rabbit/GetProductSList", {
      params: {
        ProductId: productId,
      },
    })
    .then((res) => {
      Produt2.productId = res.data.data.productId;
      Produt2.batchId = res.data.data.batchId;
      Produt2.keepSafe = res.data.data.keepSafe;
      Produt2.permission = res.data.data.permission;
      Produt2.firmName = res.data.data.firmName;
      Produt2.full = res.data.data.full;
      Produt2.productClassId = res.data.data.productClassId;
      Produt2.images = res.data.data.images;
      Produt2.creator = res.data.data.creator;
      Produt2.creationDate = res.data.data.creationDate;
      Produt2.updateor = res.data.data.updateor;
      Produt2.updatedate = res.data.data.updatedate;
    });
};
const tableData: any = ref([]);
const GetProduct = () => {
  KongaUrl
    .get("/user/api/rabbit/GetProductList", {
      params: form,
    })
    .then((res) => {
      tableData.value = res.data.items;
      form.TotalCount = res.data.totalCount;
      form.PageCount = res.data.pageCount;
    });
};
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
//上传图片
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  Produt.images = response;
  console.log(Produt.images);
};
const handleAvatarSuccess1: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  Produt2.images = response;
  console.log(Produt2.images);
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("你确定要关闭吗？")
    .then(() => {
      done();
    })
    .catch(() => {});
};
onMounted(() => {
  ShopList();
  GetProduct();
});
</script>

<style scoped>
</style>


